<template>
	<div class="container">
		<view class="content">
			<view class="img_box">
				<image :src="userInfo.avatar" mode=""></image>
			</view>
			<view class="user">{{userInfo.nickname}}</view>
			<view class="phone">{{userInfo.phone}}</view>
			<view class="code_box">
				<image :src="'data:'+image" mode="widthFix"></image>
			</view>
			<view class="user"> 扫一扫，加入推广，赢现金哦</view>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				access_token: '',
				image: '',
			}
		},
		async onLoad() {
			await this.getUserInfo()
			await this.getQRCode()
		},
		methods: {
			async getUserInfo() {
				await this.$allApi.getQiInfo().then(res => {
					console.log(res);
					this.userInfo = res.data
				})
			},
			async getQRCode() {
				await this.$allApi.getQrcode().then(res => {
					console.log(res);
					this.image = res.data[0].poster
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.code_box {
		height: 340rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0;

		image {
			width: 340rpx;
			height: 340rpx;
		}
	}

	.phone {
		color: #666;
		font-size: 24rpx;
		text-align: center;
	}

	.user {
		text-align: center;
	}

	.img_box {
		height: 120rpx;
		margin-top: -60rpx;
		display: flex;
		justify-content: center;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}

	.content {
		width: 580rpx;
		height: 642rpx;
		opacity: 1;
		border-radius: 10rpx;
		background: #FFFFFF;

	}

	.container {
		min-height: 100vh;
		background: #EA3D37;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 200rpx;
	}
</style>